<template>
  <el-container style="height: 100%">
    <el-header class="header">
      <h2 class="welcome-title">
        欢 迎 <span class="user-name">{{ store.currentUser.name }}</span> 登 录
      </h2>
      <el-button class="logout-button" type="primary" @click="go()"
        >退出登录</el-button
      >
    </el-header>
    <el-container>
      <el-aside class="sidebar">
        <el-scrollbar height="740">
          <el-menu
            :default-openeds="defaultOpeneds"
            :default-active="activeMenu"
            background-color="#f4f7fb"
            text-color="#333"
            active-text-color="#007bff"
            mode="vertical"
            @select="handleMenuSelect"
            router
            :unique-opened="true"
            class="menu"
          >
            <template v-for="menu in menuList" :key="menu.value">
              <MenuRecursive :menu="menu" :base-path="menu.value"/>
            </template>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-main class="main-content">
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { axios } from "@/axios/axiosHelp";
import { useCounterStore } from "@/stores/counter";
import { useRouter } from "vue-router";
import MenuRecursive from "./MenuRecursive.vue";

const router = useRouter();

const go = () => {
  router.push("/");
};

const store = useCounterStore();

// 存储菜单列表
const menuList: any = ref([]);
// 存储默认展开的菜单
const defaultOpeneds = ref([]);
// 存储当前激活的菜单路径
const activeMenu = ref("");

// 处理菜单选择事件
const handleMenuSelect = (index: any) => {
  //  alert(index);
  activeMenu.value = index;
};

const getMenuList = () => {
  axios.get("http://localhost:7081/api/User/QueryNavigation").then((res) => {
    menuList.value = res.data.data;
    console.log(res.data.data, "4566");
   
  });
};

onMounted(() => {
  getMenuList();
});
</script>

<style scoped>
/* 头部样式 */
.header {
  background-color: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.welcome-title {
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
}

.user-name {
  font-size: 30px;
  color: #ffd700;
  margin-left: 5px;
}

.logout-button {
  margin-left: auto;
  background-color: #3498db;
  border-color: #3498db;
}

.logout-button:hover {
  background-color: #2980b9;
  border-color: #2980b9;
}

/* 侧边栏样式 */
.sidebar {
width: 200px !important; 
transition: width 0.3s; /* 添加平滑过渡效果 */
  border-right: none;
  background-color: #f4f7fb;
  padding: 10px;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.menu {
  border-right: none;
}

/* 主内容区域样式 */
.main-content {
  background-color: #ffffff;
  padding: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}

/* 菜单图标样式 */
.el-menu-item i,
.el-sub-menu__title i {
  margin-right: 10px;
  color: #777;
}

.el-menu-item.is-active i,
.el-sub-menu.is-active .el-sub-menu__title i {
  color: #007bff;
}

/* 菜单激活项背景色 */
.el-menu-item.is-active,
.el-sub-menu.is-active > .el-sub-menu__title {
  background-color: #e8f2ff;
}
</style>
